<template>
  <div class="indexOne">
    <div class="indexOne-bg">
      <h2>
        <i class="iconfont icon-huo mini"></i>
        <i class="iconfont icon-huo middle"></i>
        <i class="iconfont icon-huo "></i> 新品来袭
        <i class="iconfont icon-huo "></i>
        <i class="iconfont icon-huo middle"></i>
        <i class="iconfont icon-huo mini"></i>
        <!-- <a
            class="more"
           href="http://www.higuang365.com/wap/#/doubleEleven"
            >更多></a> -->
        <a class="more" href="http://www.higuang365.com/index.php/wap/#/monthly"
          >更多></a
        >
        <!-- http://192.168.0.78:8081/#/summer -->
      </h2>
      <!-- <div class="title"> -->
      <!-- <div class="slogan">
          <van-icon name="fire" color="red" /> {{ title.name }}
        </div> -->
      <!-- <router-link class="more" :to="title.url">前往会场<van-icon name="arrow" /></router-link> -->
      <!-- <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{  timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down> -->
      <!-- <a class="more" href="http://www.higuang365.com/wap/#/monthly"
          >更多></a
        > -->
      <!-- </div> -->
      <div class="content">
        <div class="item" v-for="(value, index) in items" :key="index">
          <div
            @click="toshop(value.F_ProductId, $store.state.userInfo.F_Question)"
          >
            <img
              class="lazy-img"
              :src="'http://higuang365.com/' + value.F_pic_url"
              @load="loadimg($event)"
              data-lazy="loading"
            />
            <div class="name">{{ value.F_Name }}</div>
            <div class="price">
              <div class="saleprice">
                <div class="estimate">￥</div>
                {{ value.F_BdPrice }}
              </div>
              <div class="estimate">{{ value.F_Amount }}</div>
            </div>

            <div
              class="cart"
              @click.stop="showShare(value, $store.state.userInfo.F_Question)"
            >
              立即分享
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-overlay :show="showherf" z-index="10001">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" color="#fff" size="3rem" vertical
          >前往商城</van-loading
        >
      </div>
    </van-overlay>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
import { GetTagGoodsList } from "@/api/home";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const data = reactive({
      // time: date - new Date(),
      items: [],
      showherf: false,
      title: { name: "新品来袭", url: "/rushbuy/peoplebuy", tag_id: "38" },
    });
    //  tag: [{ 'tag_name': '每日爆款', 'tag_id': 23 },
    //       { 'tag_name': '嗨11抢先购', 'tag_id': 22 },
    //       { 'tag_name': '全民抢购', 'tag_id': 21 },
    //       { 'tag_name': '每月特促', 'tag_id': 19 },
    //       { 'tag_name': '新品', 'tag_id': 18 },
    //       { 'tag_name': '新品预售', 'tag_id': 16 }
    //   ]
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: 1,
        pageSize: 10,
        tag_id: data.title.tag_id,
        strlv: "",
      });

      if (!res[0]) {
        const res = await GetTagGoodsList({
          pageNum: 1,
          pageSize: 10,
          tag_id: data.title.tag_id,
          strlv: "",
        });
        data.items = res[1];
        return;
      }
      data.items = res[1];
    };
    const showShare = (value: any, F_Question: string) => {
      let purl = "http://higuang365.com/" + value.F_pic_url; //可以是本地图片
      var surl =
        "http://www.higuang365.com/wap/#/product?id=" +
        value.F_ProductId +
        "&parents_id=" +
        F_Question; //分享的链接
      let msg = {
        title: "嗨逛全球", //标题
        content: value.F_Name, //内容
        thumbs: [purl], //缩略图
        href: surl,
        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
        window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
      } else {
        window.location.href =
          "http://www.higuang365.com/wap/#/product?id=" +
          value.F_ProductId +
          "&parents_id=" +
          F_Question;
      }
    };
    const toshop = (F_ProductId: string, F_Question: string) => {
      data.showherf = true;
      setTimeout(() => {
        data.showherf = false;
        window.location.href =
          "http://www.higuang365.com/wap/#/product?id=" +
          F_ProductId +
          "&parents_id=" +
          F_Question;
      }, 2000);
    };
    const loadimg = (event: any) => {
      event.target.dataset.lazy = "loaded";
    };
    onLoad();
    return { ...toRefs(data), loadimg, showShare, toshop };
  },
});
</script>
<style lang="scss" scoped>
.indexOne {
  font-size: 1rem;
  padding: 0 0.5rem;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
  }
  .indexOne-bg {
    // background: url(//img10.360buyimg.com/wq/jfs/t1/102062/10/16107/4994/5e786d97E8bd7cdab/6f298520ce0743b2.png)
    //   no-repeat;
    background-size: contain;

    h2 {
      font-size: 2rem;
      padding: 0.5rem;
      margin: 1rem;
      border-bottom: 5px solid #f7f7f7;
      position: relative;
      i {
        color: red;
        font-size: 2rem;
      }
      .icon-huo {
        font-size: 2rem;
      }
      .mini {
        font-size: 1.4rem;
      }
      .middle {
        font-size: 1.7rem;
      }
      .more {
        font-size: 1rem;
        position: absolute;
        top: 1rem;
        right: 0;
        font-weight: 500;
        color: #f15e5e;
      }
    }
  }

  .title {
    padding: 0.5rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    // .more {
    //   font-size: 1rem;
    //   font-weight: 500;
    //   color: #f15e5e;
    //   letter-spacing: 0;
    // }
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ee0a24;
    }
    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #90797c;
      border-radius: 4px;
    }
  }
  .slogan {
    text-align: left;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .content {
    display: flex;
    overflow: auto;
    border-radius: 1rem;
    .item {
      margin: 0.5rem;
      min-width: 9rem;
    }
    img {
      width: 100%;
      border-radius: 1rem;
      height: 9rem;
    }
    .name {
      height: 1.6rem;
      line-height: 1.6rem;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      letter-spacing: 1px;
    }
    .price {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      color: #ff0036;
    }
    .saleprice {
      display: flex;
      font-size: 1.7rem;
      font-weight: bold;
      position: relative;
      top: -4.5px;
    }
    .estimate {
      font-size: 1rem;
    }
    .cart {
      padding: 0.5rem;
      background: linear-gradient(90deg, #ff6940, #ff334a);
      color: #fff;
      border-radius: 2rem;
    }
  }
  .more {
    line-height: 2.4rem;
  }
}
</style>
